import './index.scss'
import PropTypes from 'prop-types'
import { useBoolean } from 'ahooks'
import { Modal, Drawer } from 'antd'
import { useEffect, useState, lazy, Suspense } from 'react'

export const ModelBox = ({ OptionsCall, ModalEvent, actionRef }) => {
    ModelBox.propTypes = {
        OptionsCall: PropTypes.object,
        ModalEvent: PropTypes.object,
        actionRef: PropTypes.object,
    }
    const [Data, setData] = useState()
    const [Title, setTitle] = useState()
    const [Close, setClose] = useState(false)
    const [Template, setTemplate] = useState()
    const [Open, { setTrue, setFalse }] = useBoolean(false)

    useEffect(() => {
        if (OptionsCall) {
            setData(OptionsCall.data)
            setTitle(OptionsCall.title)
            setClose(OptionsCall.close)
            const temp = lazy(() => import(`./ModalList/${OptionsCall.type}.jsx`))
            setTemplate(temp)
            setTrue()
        }
    }, [OptionsCall, setTrue])


    return (
        <Modal
            className="ModelBox"
            centered
            open={Open}
            footer={null}
            destroyOnClose
            closeIcon={!Close}
            onCancel={setFalse}
            maskClosable={false}
            title={Title || '操作弹窗'}
        >
            <Suspense>
                {Template && <Template data={Data} Off={setFalse} ModalEvent={ModalEvent} actionRef={actionRef} />}
            </Suspense>
        </Modal>
    )
}

export const DrawerBox = ({ OptionsCall, ModalEvent, actionRef }) => {
    DrawerBox.propTypes = {
        OptionsCall: PropTypes.object,
        ModalEvent: PropTypes.object,
        actionRef: PropTypes.object,
    }

    const [Data, setData] = useState()
    const [Title, setTitle] = useState()
    const [width, setWidth] = useState()
    const [Close, setClose] = useState(false)
    const [Template, setTemplate] = useState()
    const [placement, setPlacement] = useState('right')
    const [Open, { setTrue, setFalse }] = useBoolean(false)

    useEffect(() => {
        if (OptionsCall) {
            setData(OptionsCall.data)
            setTitle(OptionsCall.title)
            setClose(OptionsCall.close)
            setWidth(OptionsCall?.width || 480)
            setPlacement(OptionsCall?.placement || 'right')
            const temp = lazy(() => import(`./ModalList/${OptionsCall.type}.jsx`))
            setTemplate(temp)
            setTrue()
        }
    }, [OptionsCall, setTrue])

    return (
        <Drawer
            className="DrawerBox"
            open={Open}
            destroyOnClose
            onClose={setFalse}
            closeIcon={!Close}
            maskClosable={false}
            placement={placement}
            title={Title || '操作弹窗'}
            width={width}
        >
            <Suspense>
                {Template && <Template data={Data} Off={setFalse} ModalEvent={ModalEvent} actionRef={actionRef} />}
            </Suspense>
        </Drawer>
    )
}